@import "../global/global";

// Popup
//
// Markup:
// <div style="height: 160px;">
// <div class="ring-popup {$modifiers}">
//   <div class="ring-popup__i">
//     <a class="ring-link ring-popup__item" href="#">Profile</a>
//     <span class="ring-popup__separator"></span>
//     <span class="ring-link ring-popup__item">Log out</span>
//     <span class="ring-popup__item ring-popup__item_action">Log out</span>
//     <span class="ring-popup__item ring-popup__item_action">Log out</span>
//   </div>
// </div>
// </div>
//
// .ring-popup_bound - Popup adjacent to an input, without upper border and shadow
// .ring-popup_typed - See full example [below](#5.3)

.ring-popup {
  position: absolute;
  z-index: $ring-overlay-z-index;
  box-sizing: border-box;

  text-align: center;

  border: 1px solid #ADADAD; // IE8-
  border-color: rgba(0, 0, 0, .2);

  background-color: #FFF;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .2);
  border-radius: $ring-border-radius;

  overflow-y: auto;

  @include ring-font;

  &__filter-wrapper {
    padding: 0 2*$ring-unit;
    margin: 2*$ring-unit 0 $ring-unit;
  }
}

// TODO Find better name and probably approach
.ring-popup_bound {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
